<template>
    <div>  
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="文章标题" prop="artical_title">
    <el-input v-model="ruleForm.artical_title"></el-input>
  </el-form-item>
  <el-form-item label="文章内容" prop="artical_sub">
    <el-input type=textarea v-model="ruleForm.artical_sub"></el-input>
  </el-form-item>
  <el-form-item label="图片" prop="artical_img">
    <el-upload
  class="upload-demo"
  action="/artical/addimg"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success='success'
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>      
    </div>
</template>

<script>
import axios from 'axios';
  export default {
    data() {
      return {
        ruleForm: {
          artical_title:'',
          artical_sub:'',
          artical_img: '',
        },
        rules: {
          artical_title: [
            { required: true, message: '请输入文章标题', trigger: 'blur' },
          ],
          artical_sub:[
            { required: true, message: '请输入文章内容', trigger: 'blur' },
          ]
        }
      };
    },
    methods: {
      //输入框
      submitForm(formName,ruleForm) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        axios
        .post('/artical/add',this.ruleForm)
        .then(res =>{
          if(res.data){
            this.$router.push('/All/articalList');
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //图片
            handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      //成功上传图片钩子
      success(response, file, fileList){
        this.ruleForm.artical_img = response.file[0].path.substr(6);
      }
    }
  }
</script>

<style>
.el-main{
    text-align: left;
    line-height: 0;
}
/* 输入框设置 */
.el-input__inner{
    width: 360px;
}
</style>